<!--  -->
<template>
<div class="results" >
    <div class="trophy-box" v-if="JSON.stringify(this.$store.state.resultList) != '{}'">
        <p><i class="iconfont">&#xe68b;</i></p>
        <p class="points">{{result.text}}<span>{{parseInt(result.points)}}</span>分</p>
    </div>
    <div class="receive" v-if="result.coding">
        <div class="coding">
            <span v-for="(item,index) in result.coding" :key="index">{{item}}</span>
        </div>
        <p>复制上方号码到支付宝搜索 - 红包 - 输入号码 - 领取</p>
        <div class="copy">
            <button class="ui-btn-lg ui-btn-primary" @click="copy">一键复制</button>
        </div>
    </div>
</div>
</template>

<script>
import {getresults} from "@/utils"
export default {
data() {
return {
    result:{
        points:0,
        coding:'',
        text:'请再接再厉！您本次得分'
        }
}
},
//生命周期 - 创建完成（访问当前this实例）
created() {
    if(JSON.stringify(this.$store.state.resultList) != '{}'){
        this.getscore()
    }
    
},
//生命周期 - 挂载完成（访问DOM元素）
mounted() {

},
methods:{
    async getscore(){
        const results = await getresults(this.$store.state.resultList)
        if(results.code == "200"){
            this.result.points = results.data.points
            if(results.data.points > 60){
                this.result.coding = results.data.coding
                this.result.text = '恭喜！您本次得分'
            }
        }else{
            this.$router.push('/404')
        }
    },
    copy() {
        let transfer = document.createElement('input');
        document.body.appendChild(transfer);
        transfer.value = this.result.coding;  // 这里表示想要复制的内容
        transfer.focus();
        transfer.select();
        if (document.execCommand('copy')) {
            document.execCommand('copy');
        }
        transfer.blur();
        alert('复制成功');
        document.body.removeChild(transfer);
        
    }
},
}
</script>
<style scoped lang="scss">
/* @import url(); 引入css类 */
.results{
    height: calc(100% - 10%);
    padding: 5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    .trophy-box{
        padding: .8rem 0;
        p{
            text-align: center;
            .iconfont{
                font-size: 70px;
                color: rgb(207, 187, 7);
            }
        }
        .points{
            font-size: 18px;
            padding: 10px 0;
            color: rgb(129, 125, 125);
            span{
                display: inline-block;
                padding: 0 6px;
                font-size: 25px;
                font-weight: bold;
                color: rgb(207, 187, 7);
            }
        }
    }
    .receive{
        .coding{
            text-align: center;
            span{
                display: inline-block;
                width: 25px;
                height: 25px;
                background: rgb(252, 249, 249);
                border-radius: 3px;
                margin: 5px;
                color: rgb(134, 124, 124);
                font-size: 15px;
                line-height: 25px;
            }
        }
        p{
            font-size: 14px;
            text-align: center;
            color: rgb(141, 133, 133);
        }
        .copy{
            margin-top: 20px;
        }
    }
}
</style>